<template>
  <Row type="flex" justify="start">
    <!-- search -->
    <Col span="16" offset="4">
    <ul class="navi" ref="navi">
        <!--{{item}}-->
        <li class="navi-item" v-for="item in navis" >
          <a :href="'#/'+item.code" :class="activeNavi === item.id ? 'active':''" :id="item.id" @click="changeNavi(item.id)">
            {{item.name}}
            <div class="border-bottom"></div>
          </a>
        </li>
    </ul>
    </Col>
  </Row>
</template>

<script>
  import Cookies from 'js-cookie';

  export default {
      name: "mnavi",
      data() {
          return {
            navis: []
          }
      },
      methods: {
        init() {
          this.$axios({
            method: 'get',
            url: '/api/class',
          }).then(res => {
            this.navis = res.data.result;
            Cookies.set('navis', JSON.stringify(this.navis), {expires: 1 * this.GLOBAL.EXPIRES.hours});
          })
        },
        changeNavi(id) {
          this.activeNavi = id;
          Cookies.set('activeNavi', id);
          this.updatedNavi();
        },
        updatedNavi() {
          let list = this.$refs.navi.children;
          let fromNavi = Array.from(list).find(e => e.firstChild.className === 'active');
          if (fromNavi!==undefined) {fromNavi.firstChild.className = '';}
          let toNavi = Array.from(list).find(e => e.firstChild.id === this.activeNavi);
          toNavi.firstChild.className = 'active';
        }
      },
      mounted() {
        let naviD = Cookies.get('navis');
        if (naviD !== undefined) {
          this.navis = JSON.parse(Cookies.get('navis'));
        } else {
          this.init();
        }
        this.activeNavi = Cookies.get('activeNavi');
        if (this.activeNavi === undefined) {
          this.activeNavi = '0';
        }
      },
    }
</script>

<style scoped>
  .active {
    color: #f2593f;
  }

  .active .border-bottom,
  .navi .navi-item a:hover .border-bottom {
    display: block;
  }

  .navi-item {
    float: left;
    margin: 20px 80px 20px 0;
  }

  .navi {
    font-size: 1.5rem;
    margin-top: 10px;
  }

  a .border-bottom {
    display: none;
    position: relative;
    top: 0px;
    height: 4px;
    width: 100%;
    background-color: #f2593f;
    border-radius: 2px;
  }
</style>
